<template>
  <div class="hd">
    <!-- <div class="hd mt10">
      <img src="../../assets/mall_banner.jpg" alt="">
    </div> -->
    <position>
      <router-link to="/classroom">国医讲堂</router-link>
      &gt;
      <span class="last">视频列表</span>
    </position>
    <div class="yybox four-cornor-wrapper" style="background:#fff;">
      <i class="l"></i>
      <i class="r"></i>
      <i class="t"></i>
      <i class="b"></i>
      <!-- product-list -->
      <div v-if ="newsList.length > 0">
        <ul class="product-list">
          <li class="product-list-item" v-for="(v, i) in newsList" :key="i" @click="viewProduct(v)">
            <div class="product-img"><img :src="v.goodsImage" v-lazy="DOCTOR_AVATAR+v.id+'.jpg'" /></div>
            <div class="product-title">{{v.title}}</div>
            <div class="product-detail">
              <i class="icon-c_time iconfont"></i> {{v.created | format }}  
              <span class="fr">
              <i class="icon-eye1_open iconfont"></i> {{v.readCount}}
              </span>
            </div>
          </li>
        </ul>
        <div class="clearfix mt20" >
          <div class=" fr">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="params.pagenum"
              :page-sizes="[12]"
              :page-size="params.pagesize"
              layout="total, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="no-data" v-else>暂无数据</div>
      <!-- end product list -->
    </div>
  </div>
</template>

<script>
import Position from '../../components/Position'
import {commonAjax, PLATFORM_PREFIX, DOCTOR_AVATAR} from '../../api/api'

export default {
  components: {Position},
  data () {
    return {
      DOCTOR_AVATAR: DOCTOR_AVATAR,
      tagId: '-1',
      newsList: [],
      params: {
        pagenum: 1,
        pagesize: 12
      },
      total: 0
    }
  },
  mounted () {
    if (!localStorage.accessToken) {
      this.$message({message: '请先登录', type: 'error'})
      return
    }
    this.findHealthNewsList(this.tagId)
  },
  filters: {
    format (val) {
      if (!val) {
        return ''
      }
      return val.slice(0, 10)
    }
  },
  methods: {
    findHealthNewsList (tagId) {
      this.$store.commit('UPDATE_LOADING')
      let config = {
        category: this.tagId,
        pageNo: this.params.pagenum,
        pageSize: this.params.pagesize,
        newsStatus: 1
      }
      commonAjax([config], `${PLATFORM_PREFIX}.healthNewService`, 'findHealthNewsList').then(res => {
        this.$store.commit('UPDATE_LOADING')
        if (res.data.code === 200 && res.data.body.items) {
          this.newsList = res.data.body.items
          this.total = res.data.body.total
        }
      }).catch(err => {
        this.$store.commit('UPDATE_LOADING')
        console.warn(err)
        localStorage.removeItem('accessToken')
        location.reload()
      })
    },
    viewProduct (v) {
      this.$router.push('/classroom/' + v.id)
    },
    handleSizeChange (val) {
      this.params.pagesize = val
      this.findHealthNewsList(this.tagId)
    },
    handleCurrentChange (val) {
      this.params.pagenum = val
      this.findHealthNewsList(this.tagId)
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../common/css/vars.less';
.product-list{
  overflow: hidden;
  margin-right: -30px;
  >.product-list-item {
    float: left;
    width: 244px;
    margin-left: 20px;
    margin-top: 20px;
    border: 1px solid @color-border;
    padding: 10px;
    transition: all .5s;
    cursor: pointer;
    &:hover{
      border-color: #f00;
      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    }
    .product-img > img {
      width: 224px;
      height: 224px;
    }
    .product-title {
      height: 48px;
      overflow: hidden;
      padding-top: 10px;
    }
    .product-detail {
      color: #999;
      font-size: 12px;
      line-height: 2;
      .iconfont {
        font-size: 1em;
      }
    }
  }
}
</style>
